import * as echarts from "../../../components/ec-canvas/echarts"
const app = getApp();
var basePage = require('../../../common/BasePage');

Page({
	behaviors: [basePage],
	data: {
		/**是否显示折线图 */
		// showEc:false,
		pdc: {
			product_name: '请选择商品'
		},
		ec: {
			onInit: {}
		},
		showTime: false,
		date: "请选择时间",
		startTime: "",
		endTime: "",
		select:0
	},
	onLoad: function(options) {
		let that = this;
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on('product', function (data) {
			wx.setNavigationBarTitle({
			  title:  data.product.product_name+"行情走势",
			})
			that.setData({
				pdc:data.product
			})
			that.getTime(7)
		})

	},
	onReady() {
		// ec.onInit();
		// this.data.ec.onInit=this.initChart1;
		// this.setData({
		//   ec: this.data.ec
		// })


	},
	onDisplay() {
		this.setData({
			showTime: true
		})
	},
	onClose() {
		this.setData({
			showTime: false
		})
	},
	onConfirm(e) {
		var startTime = this.formatDate(e.detail[0])
		var endTime = this.formatDate(e.detail[1])
		this.setData({
			showTime: false,
			date: startTime + "至" + endTime,
			startTime: startTime,
			endTime: endTime,
		})
		if (this.data.pdc.product_name != "请选择商品") {
			this.req_data()
		}
	},
	getDateRange(e) {
		var intervalDays=e.currentTarget.dataset.day
		var index=e.currentTarget.dataset.index
		this.setData({
			select: index,
		})
		this.req_data()
		// this.getTime(intervalDays,index)
	},
	//时间格式化
	formateDate(time) {
		let year = time.getFullYear()
		let month = time.getMonth() + 1
		let day = time.getDate()
		// let h = time.getHours()
		// let m = time.getMinutes()
		return year + '-' + month + '-' + day
	},
	getTime(intervalDays,index) {
		
		let oneDayTime = 24 * 60 * 60 * 1000;
		var dateNow = new Date();
		
		let list = [];
		let lastDay;
		lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
		dateNow=this.formateDate(dateNow)
		lastDay=this.formateDate(lastDay)
		console.log("时间",dateNow,"时间",lastDay)
		this.setData({
			select: index,
			startTime: lastDay,
			endTime: dateNow,
		})
		this.req_data()
	},
	/**请求统计数据 */
	req_data() {
		console.log(this.data.select)
		var type=this.data.select?(Number(this.data.select) +1):1
		this.request({
			url: this.data.host + '/home/index/market?wh_id=' + app.globalData.warehouse.wh_id +
				'&product_id=' + this.data.pdc.product_id +"&type="+type,
		}, this.get_data_ok)
	},
	/**打开商品选择页面 */
	choose_click() {
		let that = this;
		wx.navigateTo({
			url: '/pages/cls/qiugou_choosegoods/choose?wh_id=' + app.globalData.warehouse.wh_id,
			events: {
				choose_pdc: function(data) {

					//  data.levelArr=JSON.parse(JSON.stringify( getApp().globalData.levelArr));
					that.setData({
						pdc: data,
						// showEc:true
					});
					that.req_data()
				}
			}
		})
	},
	get_data_ok(res) {
		let data = res.data;
		/**数据标题 */
		let labelArr = [];
		/**横坐标数据 */
		let xAxisArr = [];
		// let xAxisArr=["20210726","20210727","20210728","20210729","20210730","20210731","20210801","20210802"];
		/**每条线的数据 */
		let seriesArr = [];
		let isxAxisArr = true;
		for (const key in data) {
			if (Object.hasOwnProperty.call(data, key)) {
				// console.log("key",key);
				const element = data[key];
				if (typeof(element) == 'string') {
					let arr = key.split("_");
					labelArr.push(element);
					seriesArr.push({
						key: arr[0] + "_" + arr[1] + "_items",
						name: element,
						type: 'line',
						smooth: true,
						data: []
					})
				} else if (isxAxisArr) {
					isxAxisArr = false;
					for (const date in element) {
						xAxisArr.push(date)
					}

				}
				// console.log("element",element);
			}
		}
		seriesArr.forEach(element => {
			// console.log(data[element.key]);
			var obj = data[element.key];
			for (const key in obj) {
				if (Object.hasOwnProperty.call(obj, key)) {
					const item = obj[key];
					element.data.push(item.price);
					// console.log("arr",arr)
				}
			}
			// for (const iterator of data[element.key]) {
			//   console.log("iterator",iterator)
			//   // element.data.push(iterator)
			// }
		});
		// console.log("labelArr",labelArr);
		// console.log("seriesArr",seriesArr);

		var option = {

			legend: {
				data: labelArr,
				bottom:0,
				// top: 0,
				left: 'center',
				// backgroundColor: 'red',
				z: 100,
			},
			grid: {
				containLabel: true,
				left :0,
				right:0,
				bottom:100
			},
			tooltip: {
				show: true,
				trigger: 'axis'
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: xAxisArr,
				// show: false
			},
			yAxis: {
				x: 'center',
				type: 'value',
				splitLine: {
					lineStyle: {
						type: 'dashed'
					}
				}
				// show: false
			},
			series: seriesArr
		};
		var echartsComponnet = this.selectComponent('#data-line');
		echartsComponnet.init((canvas, width, height, dpr) => {
			console.log("width",width)
			var Chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr
			});

			Chart.setOption(option);
			return Chart;
		});
	},
	toCat(){
		wx.setStorageSync('catId',this.data.pdc.cate_id)
		wx.switchTab({
			url: "/pages/cat/Index",
		})
	},

});
